<template>
  <view class="container">
    <form @reset="formReset" @submit="formSubmit">
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">用户名: </view>
          <input class="tui-input self-flex-content" maxlength="50" v-model="dataUser.loginName"  placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">性别：</view>
          <input class="tui-input self-flex-content" @input="dataUser.sex" v-model="dataUser.sex" maxlength="50"   placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">所在学院: </view>
          <input class="tui-input self-flex-content" maxlength="50" @input="dataUser.college" v-model="dataUser.college"  placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">手机号码：</view>
          <input class="tui-input self-flex-content" maxlength="50" @input="dataUser.phone" v-model="dataUser.phone" placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">邮箱：</view>
          <input class="tui-input self-flex-content" maxlength="50" @input="dataUser.email" v-model="dataUser.email" placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      
      <view class="tui-btn-box">
        <button class="btn-primary" formType="submit" hover-class="btn-hover" type="primary">提交</button>
        <button class="btn-primary btn-gray" formType="reset" hover-class="btn-gray-hover">重置</button>
      </view>
    </form>

  </view>
</template>

<script>
	import { findUserById } from '@/api/user/index'
    import { update } from '@/api/user/index'
	import {mapActions} from 'vuex'
  const form = require("../../../utils/form/formValidation");
  import tuiListCell from "@/components/list-cell/list-cell"

  // 下拉框
  import tuiDropdownList from "@/components/dropdown-list/dropdown-list"
  import tuiIcon from "@/components/icon/icon"
  import tuiButton from "@/components/button/button"

  export default {
    components: {
      tuiListCell,
      tuiIcon,
      tuiButton,
      tuiDropdownList,
    },
    name: "formValidation",
    data() {
      return {
       dataUser: {
            id: '',
           loginName: '',
           email: '',
           phone: '',
           sex: '',
           college: ''
       }
      }
    },
	onLoad(option) {
	
	  this.init()
	
	},
    methods: {
		init() {
		  findUserById().then(res => {
		    this.dataUser = res.data
		    console.log("dataUser",this.dataUser)
		  })
		},
      formSubmit(e) {
        let user = {
          id: this.dataUser.id,
          loginName: this.dataUser.loginName,
          email: this.dataUser.email,
          sex: this.dataUser.sex,
          phone: this.dataUser.phone,
          college: this.dataUser.college
        }
          update(user).then(res => {
            console.log("dataUser",this.dataUser)
          })
        uni.navigateBack({

        })
      },
      formReset(e) {
        console.log("清空数据")
      },
      dropDownList(item) {
        this.dropdownShow = !this.dropdownShow
        console.log(item)
        this.tui.toast('选择 ' + item.name)
        this.dropdownSelect = item.name
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "edit.css";
</style>
